"use client";

import React from "react";
import Link from "next/link";
import { useLanguage } from "~/lib/LanguageContext";

export function ModelFineTuning() {
  const { language } = useLanguage();
  
  const title = language === 'zh' ? '大模型微调' : 'LLM Fine-tuning';
  const buttonText = language === 'zh' ? '了解更多' : 'Learn More';
  
  return (
    <Link href="/llm-finetuning" className="w-full h-12 group relative flex items-center p-3 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/40 dark:to-indigo-950/40 border border-blue-100 dark:border-blue-900/30 overflow-hidden transition-all duration-300 hover:shadow-md hover:h-auto rounded-lg text-blue-700 dark:text-blue-300 hover:text-indigo-800 dark:hover:text-indigo-200">
      <div className="flex items-center gap-3">
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transition-transform group-hover:scale-110 group-hover:rotate-3 flex-shrink-0">
          <path d="M12 2v8"/>
          <path d="m4.93 10.93 1.41 1.41"/>
          <path d="M2 18h2"/>
          <path d="M20 18h2"/>
          <path d="m19.07 10.93-1.41 1.41"/>
          <path d="M22 22H2"/>
          <path d="m8 22 4-10 4 10"/>
          <path d="M12 14v4"/>
        </svg>
        <h3 className="text-base font-medium truncate">{title}</h3>
      </div>
      
      <div className="absolute top-12 left-0 right-0 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/40 dark:to-indigo-950/40 p-3 opacity-0 group-hover:opacity-100 transition-all duration-300 flex flex-col">
        <p className="text-sm text-blue-600 dark:text-blue-400 mb-3">
          {language === 'zh' 
            ? '通过提供特定领域的代码示例，训练AI深入理解代码结构，生成图表和各类文档。' 
            : 'Train AI to deeply understand code structures by providing domain-specific examples, generating diagrams and various document types.'}
        </p>
        <p className="text-sm text-blue-600 dark:text-blue-400 mb-3">
          {language === 'zh' 
            ? '即将在2025年CodeMariner版本中推出增强型代码理解和多类型文档生成功能' 
            : 'Enhanced code comprehension and multi-type documentation generation coming in 2025 CodeMariner release'}
        </p>
        <div className="text-sm font-medium flex items-center gap-1.5">
          {buttonText}
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="transition-transform group-hover:translate-x-1">
            <path d="M5 12h14"/>
            <path d="m12 5 7 7-7 7"/>
          </svg>
        </div>
      </div>
      <span className="absolute bottom-0 left-0 h-0.5 w-full bg-gradient-to-r from-blue-400 to-indigo-500 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100" />
    </Link>
  );
} 